<template>
  <el-aside class="left-aside">
    <div class="index-top">
      <div>
        <div style="  margin-left: 50px;">
          <el-avatar :size="70" class="" :src="imageSrc"></el-avatar>
        </div>

        <!-- <div v-if="user" class="index-name">{{ user.name }}</div> -->
        <!-- <el-avatar :size="80" class=""
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> -->

      </div>
      <div class="index-name">
        {{ user.name }}
      </div>

    </div>

    <div class="index-bottom">
      <div class="list-top">
        <el-row>
          <el-col :span="12">
            <div class="list-title">
              <el-icon color="#409EFC" :size="25">
                <Comment />
              </el-icon>
              <div>通知公告</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list-sub-title">
              <el-link type="primary" @click="more">更多</el-link>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="24" v-for="(item, index) in articles" @click="detail(item.id)"><el-link class="list-item">{{
            index + 1 }}、{{ item.title }}</el-link></el-col>
      </el-row>
     
    </div>
  </el-aside>
</template>
<script>

import {
  ElMessageBox,
  ElMessage,
  ElButton,
  ElForm,
  ElMenu,
  ElMenuItem,
  ElIcon,
  ElSubMenu,
  ElRadioButton,
  ElRadioGroup,
  ElCol,
  ElLink,
} from "element-plus";
import { API_BASE_URL } from '../constants';

import {
  Document,
  Menu as IconMenu,
  Setting,
  ArrowDown,
  Operation,
  Comment,
  Picture as IconPicture,
} from "@element-plus/icons-vue";
import { httpService } from "@/utils/httpService";

export default {
  name: "Header",
  data() {
    return {
      articles: [],
      imageSrc: JSON.parse(sessionStorage.getItem("user")).avatar ? API_BASE_URL + JSON.parse(sessionStorage.getItem("user")).avatar : require('@/assets/default.png'),
      articleTotal: 0,
      user: JSON.parse(sessionStorage.getItem("user")),
    };
  },
  components: {
    ElCol,
    ElButton,
    ElForm,
    ElMenu,
    ElMenuItem,
    ElIcon,
    ElSubMenu,
    ElRadioGroup,
    ElRadioButton,
    Location,
    Document,
    IconMenu,
    ElMessageBox,
    ElMessage,
    Setting,
    ArrowDown,
    Operation,
    Comment,
    IconPicture,
    ElLink,
  },
  mounted() {

    this.getTotalData();
  },
  methods: {
    getTotalData() {
      httpService("/javaApi/baseArticle/list/1/5", "", "get").then((data) => {
        console.log(data);
        this.articles = data.object.list;
        this.articleTotal = data.object.tatol;
      });
    },
    more() {
      let routeData = this.$router.resolve({
        name: "ArticleList",
      });
      window.open(routeData.href, "_blank");
    },
    detail(id) {
      let routeData = this.$router.resolve({
        name: "ArticleDetail",
        query: { id: id },
      });
      window.open(routeData.href, "_blank");
    },
  },
};
</script>
<style>
.list-top {
  padding-top: 10px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #dedede;
}

.list-title {
  font-size: 16px;
  color: #303133;
  letter-spacing: 0;
  text-align: left;
  display: flex;
}

.list-title div {
  margin-left: 6px;
}

.list-sub-title {
  font-size: 14px;
  color: #303133;
  letter-spacing: 0;
  text-align: left;
  color: #909399;
  text-align: right;

  padding: 2px;
}

.list-item {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-bottom: 16px;
  padding-top: 16px;
  border-bottom: 1px dashed #dedede;
}

.el-avatar--large {
  --el-avatar-size: 100px;
}

.index-name {
  padding: 10px;
  color: white;
  line-height: 60px;
}

.left-aside {
  width: 280px;
  /* background: url(../assets/left.png); */
  /* background-position-x: left; */
  background-repeat: no-repeat;
  border-right: 1px solid #e0e5e9;
  /* height: calc(100vh - 70px); */
  background-position: bottom left;
}

.index-top {
  border-bottom: 1px solid #e0e5e9;
  padding-bottom: 30px;
  padding-top: 30px;
  background: url(../assets/left-top-bg.png);
  background-position-x: left;
  background-repeat: no-repeat;
  display: flex;
}

.index-bottom {
  padding: 20px;
}

.el-aside {
  color: var(--el-text-color-primary);
  text-align: center;
}
</style>